import { useRef, useEffect, useState } from 'react'
import ImageView from '../../components/ImageView'
import { debounce } from 'lodash'
import * as echarts from 'echarts';
import axios from 'axios';
const Login = () => {
  const [activeCoverCount, setActiveCoverCount] = useState('-')

  const getData = async () => {
    const data = await axios.get('/data.json')
    const result = data.data.data;
    console.log('data:', result.dataList)
    if (Array.isArray(result.dataList)) {
      result.dataList.forEach((item: any) => {
        setActiveCoverCount(item.activeCoverCount || '-')
      })

    }
  }

  useEffect(() => {
    getData()
  }, [])

  useEffect(() => {
    renderChart()
  }, [activeCoverCount])

  const pieChart: any = useRef(null);
  let pieCharts = null;
  let renderChart = () => {
    // const myChart = echarts.getInstanceByDom(pieChart.current);
    const myChart = echarts.init((document as any).getElementById('main'));
    console.log('myChart:', myChart)
    if (myChart)
      pieCharts = myChart;
    else
      pieCharts = echarts.init(pieChart.current);
    pieCharts.setOption({
      tooltip: {
        trigger: 'item',
        position: 'right',
      },
      color: ['#8dd3d2', '#ffdb69', '#f892a2'],
      title: [{
        text: 'goodsCount',
        x: 'center',
        y: 'center',
        top: '58',
        textStyle: {
          fontSize: 18,
          color: '#cacaca'
        }
      }, {
        text: '商品总数',
        x: 'center',
        y: 'center',
        top: '80',
        textStyle: {
          fontSize: 12,
          color: '#9f9f9f'
        }
      }],
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['55%', '80%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: true
          },
          data: [
            { value: activeCoverCount, name: '有效链接商品' },
            // {value: errorCoverCount, name: '异常链接商品'}
          ]
        }
      ]
    })
    console.log(pieChart)
  };
  return <div>

    <div id="main" style={{ height: 160 }}></div>

  </div>
}

export default Login;

